<!-- 右边悬浮 显示字母 -->
<template>
  <div id="" class="rightBread">
    <span v-for="letter in letters" :key="letter.key"
    @click="chooseLetter(letter)"
    :class="{active:onLetter==letter}">{{letter}}</span>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['letter'],
  data: () => ({
    letters:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
    onLetter:'A',
  }),
  methods: {
    chooseLetter(letter) {
      console.log(letter);
      this.onLetter = letter;
      this.$emit('rightLetter',letter);
    }
  },
  mounted() {
    //do something after mounting vue instance
    this.letters = this.letter;
  }
}
</script>
<style lang="scss" scoped>
.rightBread{
  position: fixed;
  right: 10px;
  top: 55%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  span{
    display: block;
    padding: 2px 4px;
    border-radius: 100%;
    &.active{
      background: $blueColor;
      color: white;
    }
  }
}
</style>
